<template>
    <div class="graph-container" style="padding: 0">
        <div
            ref="svgMain"
            class="container-main"

        >
            <D2
                v-loading="loading"
                element-loading-text="图谱加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)"
                ref="graph"
                :labels="labels"
                :names="names"
                :linkTypes="linkTypes"
                :height="svgHeight"
                :width="svgWidth"
                @start-loading="graphLoading(true)"
                @finish-loading="graphLoading(false)"
            ></D2>
        </div>
        <el-drawer :destroy-on-close="true" :visible.sync="showDrawer" direction="rtl" size="35%" :with-header="false">
            <Cooperation :type="'cooperation'" v-if="drawerType === 'cooperation'" :node-info="showNodeInfo" :flag="flag"></Cooperation>
            <Compete :type="'compete'" v-else-if="drawerType === 'compete'" :node-info="showNodeInfo"></Compete>
        </el-drawer>
    </div>
</template>

<script>
import D2SearchBar from './components/D2SearchBar.vue';
import D2GraphInfo from './components/D2GraphInfo.vue';
import D2 from './components/D2.vue';
import { getNodeRelationGraph } from '@/api/graphData';
import { searchEntityLinks } from '@/api/node';
import Cooperation from '@/components/drawer/Cooperation.vue';
import Compete from '@/components/drawer/Compete.vue';

export default {
    name: 'D2Page',
    components: {
        Compete,
        Cooperation,
        D2SearchBar,
        D2GraphInfo,
        D2
    },
    mounted() {
        // 1.获取宽度和高度
        this.svgHeight = this.$refs.svgMain.offsetHeight;
        this.svgWidth = this.$refs.svgMain.offsetWidth;
        console.log('svg', this.svgHeight);
        // 2.获取基础的图谱图像
        if (this.$store.state.graphData.node.length === 0) {
            this.getGraphData();
        }
        // 3.监听事件变化
        this.$bus.$on('change2dGraph', async (node) => {
            this.loading = true;
            console.log("change 2d graph",node)
            await getNodeRelationGraph(node.label, node.id).then((response) => {
                let data = response.data.data;
                this.graphData.nodes = data.node;
                this.graphData.links = data.relationship;
                this.$store.commit('setGraphDataNode', data.node);
                this.$store.commit('setGraphDataLink', data.relationship);
            });
            this.loading = false;
            this.$refs.graph.d3init();
        });
        // 4.监听搜索事件
        this.$bus.$on('searchNodeNameAction2D', async (nodeInfo) => {
            let searchSuccess = false;
            this.loading = true;
            console.log("search")
            await searchEntityLinks(nodeInfo.domain, nodeInfo.nodeName, nodeInfo.range)
                .then((response) => {
                    if (response.data.code === 201) {
                        console.log('errror');
                        this.$message({
                            type: 'warning',
                            message: `未查询到 ${nodeInfo.nodeName} 相关信息`
                        });
                    } else {
                        let data = response.data.data;
                        this.$store.commit('setGraphDataNode', data.node);
                        this.$store.commit('setGraphDataLink', data.relationship);
                        searchSuccess = true;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            if (searchSuccess) {
                this.$refs.graph.d3init();
            }
            this.loading = false;
        });
        //     5 监听合作公司
        this.$bus.$on('searchCooperationCompany', async (data) => {
            console.log(data.type);
            this.drawerType = data.type;
            this.showDrawer = true;
            this.showNodeInfo = data.node;
            this.flag = data.flag;
        });
        // 6. 查询阶段合作公司
        this.$bus.$on('searchCompeteCompany', async (data) => {
            this.drawerType = data.type;
            this.showDrawer = true;
            this.showNodeInfo = data.node;
        });
        // 查询节点竞争公司
        this.$bus.$on('searchCompeteCompany', async (data) => {
            this.drawerType = data.type;
            this.showDrawer = true;
            this.showNodeInfo = data.node;
        });
        //     7.监听跳转到新图谱
        this.$bus.$on('toCooperationNode', async (data) => {
            this.showDrawer = false;
            this.loading = true;
            await getNodeRelationGraph(data.nodeInfo.label, data.nodeInfo.id).then((response) => {
                let data = response.data.data;
                this.graphData.nodes = data.node;
                this.graphData.links = data.relationship;
                this.$store.commit('setGraphDataNode', data.node);
                this.$store.commit('setGraphDataLink', data.relationship);
            });
            this.loading = false;
            this.$refs.graph.d3init();
        });
    },
    methods: {
        // 获取图谱数据
        async getGraphData() {
            this.loading = true;
            await searchEntityLinks("company","崇达技术")
                .then((response) => {
                    let data = response.data.data;
                    this.graphData.nodes = data.node;
                    this.graphData.links = data.relationship;
                    this.$store.commit('setGraphDataNode', data.node);
                    this.$store.commit('setGraphDataLink', data.relationship);
                })
                .catch((err) => {
                    console.log(err);
                });
            // 4.绘制图谱
            this.$refs.graph.d3init();
            this.loading = false;
        },
        getNode(id) {
            console.log(id);
            this.$refs.graph.showGetNode(id);
        },
        refreshGraph() {
            console.log('get refresh');
            this.$refs.graph.svgDom.selectAll('*').remove();
            this.$refs.graph.svgDom = null;
            this.$refs.graph.d3init();
        },
        searchNode(nodeName) {
            console.log(nodeName);
        },
        graphLoading(state) {
            this.loading = state;
        }
    },
    data() {
        return {
            graphData: {
                nodes: [],
                links: []
            },
            names: ['公司名称', '工业', '产品', '国家'],
            labels: ['company', 'industry', 'product', 'holdCompany','etf'],
            linkTypes: ['', 'suoshuhangye', 'zhuyingchanpin', 'chanpinxiaolei', 'shangyoucailiao'],
            svgHeight: 600,
            svgWidth: 1000,
            nodePool: [],
            linksPool: [],
            loading: false,
            defaultGraphPageSize: 1000,
            showDrawer: false,
            showNodeInfo: {},
            drawerType: '',
            flag: 1
        };
    }
};
</script>

<style scoped>
.graph-container {
    height: 100%;
}
.container-main {
    height: 100%;
}
</style>
